import './header.css'
//滚动条显示头部
const scroll = document.querySelector('#index-page')
const headerEl = scroll.querySelector('.header')
const CHANGED_CLASS_NAME='header-transition'
//初始状态
const INIT_STATE = 'init'
//改变后的状态、
const CHANGE_STATE ='changed'
//自己当前的状态
let state = INIT_STATE
scroll.addEventListener('scroll',()=>{
   if(state !== CHANGE_STATE&&scroll.scrollTop>0){
    state = CHANGE_STATE
    // console.log('changed');
    headerEl.classList.add(CHANGED_CLASS_NAME)
   }else if(state !==INIT_STATE&&scroll.scrollTop<=0){
    state = INIT_STATE
    console.log('reset');
    headerEl.classList.remove(CHANGED_CLASS_NAME)
   }
},false)